<template>
	<view class="page_main page_render" :class="{ can_show: render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<!-- hasHeight :navstyle="{ background: '#1F1F1F' }" -->
			<diynav ref="diynav" :navstyle="{ background: '#383950' }" isFixed isdiy hasHeight @settop="set_pagetop($event)">
				<template slot="diy">
					<view class="index_message">
						<view class="left_view">
							<view class="index_view" @click="bluetooth_connect_menu(1)">
								<image
									class="view_icon"
									:src="BLUETOOTH_DEVICE_CONFIG.bluetooth_connect ? '/static/images/index_bluetool.png' : '/static/images/index_bluetool_no.png'"
								></image>
								<text class="tt">
									{{ BLUETOOTH_DEVICE_CONFIG.bluetooth_connect ? '已连接' : '未连接' }}
								</text>
							</view>
							<view class="index_view" @click="bluetooth_connect_menu(0)">
								<image class="view_icon" src="/static/images/index_scan.png"></image>
							</view>
						</view>

						<view class="title">控制</view>

						<view class="right_view"></view>
					</view>
				</template>
			</diynav>

			<view class="page_content page_card_p">
				<judgeTips @trigger_connect_judge="bluetooth_connect_menu()"></judgeTips>

				<view class="page_card" :class="_view.view_class" v-for="(_view, index) in PAGE_VIEW" :key="index">
					<view class="card_tt" v-if="judge_tt_show(_view)">
						<view class="tt">
							{{ _view.line_tt }}
						</view>
						<image class="tips_icon" src="/static/images/tips_bms.png" v-if="_view.tips_key" @click="tips_show(_view)"></image>
					</view>

					<block v-if="_view.view_type == 'battery_control'">
						<!-- 电池控制 -->
						<view class="battery_control">
							<view class="battery_control_view" v-for="(_vv, _ii) in _view.view_list" :key="_ii">
								<!-- width="114" height="38" padding="4" -->
								<myswitch :item="_vv" width="100" :switchon="back_on(_vv)" @switch_click="COMMAND_TRANSFER($event)"></myswitch>
								<view class="view_bot" @click="tips_show(_vv)">
									<view class="tt">{{ _vv.view_tt }}</view>
									<image class="icon" src="/static/images/tips_bms.png"></image>
								</view>
							</view>
						</view>
					</block>

					<block v-else-if="_view.view_type == 'mode_select' && BLUETOOTH_INIT_FORM.battery_charge_mode > -1">
						<!-- 充电模式选择 -->
						<view class="mode_select mygrid3">
							<view
								class="mode_select_view com_chang_img_color"
								v-for="(_vv, _ii) in _view.view_list"
								:class="{
									on: BLUETOOTH_INIT_FORM.battery_charge_mode == _ii,
								}"
								:key="_ii"
								@click="battery_setting_click(_vv)"
							>
								<!-- width="114" height="38" padding="4" -->
								<image class="select_icon" src="/static/images/mode_select.png"></image>

								<view class="img_box chang_img">
									<image class="img chang_icon" :src="_vv.icon"></image>
								</view>
								<view class="tt">{{ _vv.view_tt }}</view>
							</view>
						</view>
					</block>

					<block v-else>
						<view class="card">
							<!-- battery_control -->
							<block v-if="_view.view_type == 'battery_setting'">
								<view class="battery_setting">
									<block v-for="(_vv, _ii) in _view.view_list" :key="_ii">
										<view class="battery_setting_view" @click="battery_setting_click(_vv)" v-if="roleJudge(_vv)">
											<image class="img_box" :src="_vv.icon"></image>
											<text class="tt">{{ _vv.view_tt }}</text>
										</view>
									</block>
								</view>
							</block>
						</view>
					</block>
				</view>
			</view>

			<mypopup
				:on="pagepopup"
				:popup_type="2"
				ani_position="center"
				ani_type="scale"
				:popup_config="popup_config"
				@popup_btn_click="popup_click($event)"
				@mask_click="hidepopup()"
			></mypopup>

			<bluetoothPopup ref="bluetoothPopup" @connect_callback="connect_callback()"></bluetoothPopup>
		</pagelogin>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			change_var: {},
			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '',
			render_req: false,
			nextreq: true,
			page_id: 0,
			page_form: {},
			page_data: {},
			page_list: [],
			loadingstatus: 0,

			PAGE_VIEW_KEY: 'PAGE_CONTROL',
			PAGE_VIEW: [],
			pagepopup: false,
			popup_config: {},
			tips_config: {},
		};
	},
	created() {},
	onLoad() {
		this.init_pagedata();
	},
	onShow() {
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	onShareAppMessage(res) {},
	onShareTimeline(res) {},
	methods: {
		//页面刷新
		pagerefresh(type = 0) {
			let _this = this;
			_this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.com_getonce(function () {
				_this.config_init();
			});
			_this.page_bluetooth_init();
			_this.INIT_PAGE_COMMADN_VIEW(_this.PAGE_VIEW_KEY);
			_this.com_loading_fun({ mode: 0 });
			// setTimeout(() => {
			// 	_this.COMMAND_TRANSFER({
			// 		item: {
			// 			form_key: 'index_charge_switch',
			// 			method_association_key: 'MOS_SWITCH',
			// 		},
			// 		value: 1,
			// 	});
			// }, 1500);
		},
		// 提示文本初始化接口
		config_init() {
			let _this = this;
			_this.com_getdata({
				url: '/base/config_type',
				data: {
					config_type: 'BMS-TIP',
				},
				data_fun: function (v) {
					if (v.state == 1) {
						v.info.forEach(config => {
							_this.tips_config[config.config_key] = {
								title: config.config_remark,
								content: config.config_value,
							};
						});
					}
				},
			});
		},
		page_bluetooth_init() {
			let _this = this;
			_this.bluetooth_init_judge({ click_trigger: false }, () => {
				let { bluetooth_connect, bluetooth_deviceId } = _this.BLUETOOTH_DEVICE_CONFIG;
				// 把已连接的设备添加到设备列表中
				if (bluetooth_connect) {
				} else if (bluetooth_deviceId) {
					_this.judge_has_connect({ task: false });
				}
			});
		},
		// 连接成功回调
		connect_callback() {
			let _this = this;
			_this.com_loading_fun({ mode: 0 });
			_this.TIME_TASK(() => {
				_this.goweburl_f('/pages/index/index');
			}, 300);
		},

		// 点击功能按钮
		battery_setting_click(v) {
			let _this = this;
			_this.myToolsClick({
				item: v,
				pagetype: 'control',
			});
		},

		// 弹窗点击
		popup_click(event) {
			let { type, item } = event;
			let _this = this;
			if (type == 1) {
				if (_this.objJudge(item.tips_key)) {
					_this.hidepopup();
				} else {
					_this.COMMAND_TRANSFER(event);
				}
			} else {
				_this.hidepopup();
			}
		},
		// 提示框显示
		tips_show(item) {
			let _this = this;
			let _config = _this.tips_config[item.tips_key];
			let btn = {
				confirm: '确认',
			};
			Object.assign(this.popup_config, item, _config, btn);
			this.$nextTick(() => {
				this.openpopup();
			});
		},
		judge_tt_show(vv) {
			let _this = this;
			let show = false;
			if (vv.line_tt) {
				show = true;
			}
			if (vv.view_type == 'mode_select') {
				if (_this.BLUETOOTH_INIT_FORM.battery_charge_mode < 0) {
					show = false;
				}
			}
			return show;
		},
		openpopup(v) {
			this.$nextTick(() => {
				this.pagepopup = true;
			});
		},
		hidepopup() {
			this.pagepopup = false;
		},

		back_on(vv) {
			return this.BLUETOOTH_INIT_FORM[vv.form_key];
		},
	},

	watch: {},
};
</script>

<style lang="scss">
.battery_control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.battery_control_view {
		width: calc((100% - 20rpx) / 2);
		height: 186rpx;
		background-color: #3f425a;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.view_bot {
			margin-top: 26rpx;
			display: flex;
			align-items: center;
			.tt {
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
			}
			.icon {
				margin-left: 10rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
}

.mode_select {
	// display: flex;
	// align-items: center;
	// justify-content: space-between;

	gap: 20rpx;

	.mode_select_view {
		--theme: #3f425a;
		--tt: #ffffff;
		position: relative;
		height: 166rpx;
		background-color: #3f425a;
		border-radius: 10rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		transition: all 0.3s;
		border: 2rpx solid var(--theme);

		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			border: 20rpx solid transparent;

			border-top: 20rpx solid var(--theme);
			border-right: 20rpx solid var(--theme);
			transition: all 0.3s;
		}

		&.on {
			--theme: var(--color1);
			--tt: var(--color1);

			.select_icon {
				opacity: 1;
			}
		}

		&:nth-child(n + 4) {
			// margin-top: 20rpx;
		}

		.select_icon {
			position: absolute;
			right: 4rpx;
			top: 4rpx;
			width: 16rpx;
			height: 16rpx;
			z-index: 5;
			opacity: 0;
		}

		.img_box {
			// width: 62rpx;
			// height: 62rpx;
			--width: 62rpx;
			--height: 62rpx;
		}

		.tt {
			margin-top: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: var(--tt);
			transition: all 0.3s;
		}
	}
}

.battery_setting {
	display: flex;
	flex-wrap: wrap;
	// align-items: center;
	// justify-content: space-between;
	padding: 36rpx 0 40rpx;

	.battery_setting_view {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;

		&:nth-child(n + 5) {
			margin-top: 32rpx;
		}

		.img_box {
			width: 78rpx;
			height: 78rpx;
		}

		.tt {
			margin-top: 12rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
